<template>
  <el-select v-model="listQuery.style" class="input-width" @change="selectChange" v-loading="listLoading">
    <el-option
      v-for="item in Options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
  import * as api from '@/api/dictionaries-select'
export default {
  name: 'DictionariesSelect',
  props: {
    className: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listLoading: false,
      Options: '',
      listQuery: {
        style: null
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      this.listQuery.style = newVal
    }
  },
  created() {
    this.getTypeList() ;
    this.value && (this.listQuery.style = this.value) ;
  },
  methods: {
    selectChange(item) {
      this.$emit('selectChange', item)
    },
    /* 获取option 下拉数据 */
    getTypeList() {
      this.listLoading = true
      api
        .getProductUnitType({
          type: this.className,
        })
        .then((response) => {
          this.Options = response.data.sort(this.sortRule)
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    sortRule(a,b) {
      return a.value - b.value; //  升序
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>
